﻿<!DOCTYPE html>
<html>
	<head>
		<meta chaset="utf-8" />
		<title>Html5游戏开发</title>
		<script type="text/javascript" src="jquery-1.4.2.js"></script>
		<script type="text/javascript" src="jquery.hotkeys.js"></script>
	</head>
	<body>
		<script type="text/javascript">
		var CANVAS_WIDTH = 480;
		var CANVAS_HEIGHT = 320;
		var FPS = 30;
		var textX = 50;
		var textY = 50;
		
		var canvaElement = $("<canvas width='"+ CANVAS_WIDTH +"' height='"+CANVAS_HEIGHT+"' style='border:1px solid #ccc'></canvas>");
		var canvas = canvaElement.get(0).getContext('2d');
		canvaElement.appendTo('body');
		//用户
		var player = {
			color:"#00A",
			x:220,
			y:270,
			width:32,
			height:32,
			draw:function(){
				canvas.fillStyle = this.color;
				canvas.fillRect(this.x,this.y,this.width,this.height);
			}
		}
		//绘图
		function draw(){
			canvas.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
			player.draw();
		}
		//更新面板
		function update(strKeyPress) {
			if (keydown.left) {
		    	player.x -= 2;
		    }
		
			if (keydown.right) {
		   		player.x += 2;
		    }
		}
		
		
		setInterval(function(){
			draw();
			update();
		},1000/FPS);
		
		jQuery(document).bind('keydown', 'left',function (evt){
			player.x -= 5;
		}).bind('keydown', 'right',function (evt){
			player.x += 5;
		}).bind('keydown', 'up',function (evt){
			player.y -= 5;
		}).bind('keydown', 'down',function (evt){
			player.y += 5;
		});
		</script>
	</body>
</html>